@import './variables.scss';

// 全局重置
body, html {
  margin: 0;
  padding: 0;
  font-family: $primary-font;
  color: #fff;
  background-color: #121212;
}

// 基础元素样式
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: bold;
  color: #fff;
}

h1, h2, h3 {
  text-shadow: $text-shadow;
}

// Element Plus 全局样式覆盖
.el-button {
  @include button-style;
}

.el-button--primary {
  background-color: $secondary-color;
  
  &:hover {
    background-color: lighten($secondary-color, 10%);
  }
}

.el-button--success {
  background-color: $success-color;
  border-color: darken($success-color, 10%);
  
  &:hover {
    background-color: lighten($success-color, 10%);
    border-color: $success-color;
  }
}

.el-button--warning {
  background-color: $warning-color;
  border-color: darken($warning-color, 10%);
  
  &:hover {
    background-color: lighten($warning-color, 10%);
    border-color: $warning-color;
  }
}

.el-button--danger {
  background-color: $danger-color;
  border-color: darken($danger-color, 10%);
  
  &:hover {
    background-color: lighten($danger-color, 10%);
    border-color: $danger-color;
  }
}

// 卡片样式
.el-card {
  @include card-style;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $hover-shadow;
  }
  
  .el-card__header {
    border-bottom: 1px solid $border-color;
    padding: $spacing-medium;
    font-weight: bold;
  }
  
  .el-card__body {
    padding: $spacing-medium;
    overflow: visible !important;
  }
}

// 表单样式
.el-form-item__label {
  color: #fff !important;
}

.el-input__wrapper,
.el-textarea__wrapper {
  background: $panel-background !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  
  &.is-focus {
    border-color: $secondary-color !important;
    box-shadow: 0 0 0 1px $secondary-color !important;
  }
}

.el-input__inner,
.el-textarea__inner {
  color: #fff !important;
}

// 下拉菜单和选择器
.el-select .el-input__wrapper {
  background: $panel-background !important;
}

.el-select-dropdown {
  background: $card-background !important;
  border: none !important;
  box-shadow: $card-shadow !important;
}

.el-select-dropdown__item {
  color: #fff !important;
  
  &.selected {
    background: $item-background !important;
    color: $highlight-color !important;
  }
  
  &:hover {
    background: $hover-background !important;
  }
}

// 日期选择器样式
.el-date-editor {
  background: $panel-background !important;
  border: 1px solid rgba(0, 91, 170, 0.4) !important;
  border-radius: $small-radius !important;
  
  .el-input__wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  .el-input__inner {
    color: #fff !important;
  }
  
  .el-input__icon {
    color: rgba(255, 255, 255, 0.7) !important;
  }
}

// 表格样式
.el-table {
  background: transparent !important;
  color: #fff !important;
  
  th, td {
    background: transparent !important;
    border-bottom: 1px solid $border-color !important;
  }
  
  th {
    background: $panel-background !important;
    color: #fff !important;
    font-weight: bold !important;
  }
  
  tr:hover > td {
    background: $item-background !important;
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  
  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

// 通用容器类
.app-container {
  background: $app-background;
  color: #fff;
  min-height: 100vh;
}

.content-container {
  padding: $spacing-large;
}

// 数据统计块样式
.stat-item {
  @include item-block;
  text-align: center;
  
  .stat-value {
    @include value-text;
  }
  
  .stat-label {
    @include label-text;
  }
}

// 标题栏样式
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-medium 0;
  margin-bottom: $spacing-large;
  border-bottom: 1px solid $border-color;
  
  h2 {
    font-size: $heading-size;
    margin: 0;
  }
} 